[Part 3] 介紹 Grid 外容器屬性

本篇將介紹以下 3 個屬性：

• justify-items
• align-items
• place-items

items 指所有內元素，而 justify、align 分別指每一個 grid cell 的主軸和交錯軸的方向（水平和垂直）。

• start：對齊區域的軸線起點
• end：對齊區域的軸線終點
• center：對齊區域的中央
• stretch：伸展區域直到填滿整條軸線

justify-items 範例

CodePen 範例

• jusfity-items：start
  

• jusfity-items：end
  

• jusfity-items：center
  

• jusfity-items：stretch
  

align-items 範例

CodePen 範例

• align-items：start
  

• align-items：end
  

• align-items：center
  

• align-items：stretch
  

place-items

為justify-items、align-items 的縮寫。

.container {
	place-items: <align-items> <justify-items>
}

.container {
	place-items: center end;
}

相等於

.container {
	align-items: center;
	justify-items: end;
}

參考資料：
CSS進階：Grid格線佈局